<template>
  <div class="user">
    <van-nav-bar class="ttop" title="登录" left-text="返回" left-arrow @click-left="goback()" />
    <div class="top-psw">登录</div>
    <div class="phone">
      <div class="phone-p">手机号</div>
      <div class="phone-num">+86</div>
      <input class="user" v-model="loginForm.username" type="text" />
      <div class="phone-p" style="margin-top:10px">密码</div>
      <i class="icon-password"></i>
      <input type="text" class="pwd" v-if="isShow" v-model="loginForm.password" />
      <input type="password" class="pwd" placeholder="输入密码" v-model="loginForm.password" v-else />
      <img
        :src="isShow ? seenImg : unseenImg"
        @click="changeType()"
        v-on:mouseover="hoverEye"
        v-on:mouseout="outEye"
        class="icon-eye"
      />
      <p style="color:white">
        温馨提示：未注册的手机号，登录时将自动注册，且代表您已同意
        <a href="#" class="bsta">《贝思客用户协议》</a>
      </p>
    </div>
    <label for></label>
    <div class="login-no">
      <input id="ckx" class="ckx" type="checkbox" @click="checkItem(ckx)" v-model="ckx.state" />
      <label for="ckx" class="noLogin">点我一下,十天内免登录</label>
    </div>
    <button @click="login" class="login">登录</button>
    <!-- <router-link tag='div' class="login" to='/usermy/main'  @click="login">登录</router-link> -->
  </div>
</template>

<script>

export default {
  name: '',
  data: () => ({
    seen: '',
    ckx: {},
    unseenImg: require('../../assets/close.png'), // 看不见密码时小眼睛的显示图片地址
    seenImg: require('../../assets/open.png'), // 看得见密码时小眼睛的显示图片地址
    pwdType: false, // 此时文本框隐藏，显示密码框
    loginForm: {
      username: '',
      password: ''
    },
    chex: null
  }),

  methods: {
    changeType: function() {
      this.pwdType = !this.pwdType // 跟着小眼睛变化，密码框隐藏，显示文本框 内容就显示了
    },
    hoverEye: function(event) {
      this.seen = !this.seen
    },
    outEye: function(event) {
      this.seen = !this.seen
    },
    checkItem(ckx) {
      ckx.state = !ckx.state
      this.chex = ckx.state
    },
    async login() {
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        this.$Toast('账号或密码不能为空')
        return
      }
      var {
        data: { username, password }
      } = await this.$http.get('/data/login', this.loginForm) // 从mock数据模拟接口 拿取账号密码
      if (username == this.loginForm.username && password == this.loginForm.password) {
        this.$Toast('登录成功')
        // 判断是否点击十天免登录
        if (Boolean(this.chex) === true) {
          let cont = {}
          cont.name = this.loginForm.username
          cont.pwd = this.loginForm.password
          localStorage.setItem('user', JSON.stringify(cont))
          console.log(11111)
        } else {
          // 未点击十天免登录,保存的localstorage会在关闭浏览器时删除
          let cont = {}
          cont.name = this.loginForm.username
          cont.pwd = this.loginForm.password
          localStorage.setItem('user', JSON.stringify(cont))

          window.onunload = function() {
            localStorage.removeItem('user')
          }
        }
        this.$router.push('/usermy/main')
      } else {
        this.$Toast('账号或密码不匹配')
        this.loginForm.username = ''
        this.loginForm.password = ''
      }
    },

    getUser() {
      const userObj = JSON.parse(localStorage.getItem('user') || '[]')
      if (userObj.length !== 0) {
        this.$router.push('/usermy/main')
      } else {
        this.$router.push('/usermy')
      }
    }
  },
  computed: {
    isShow() {
      return !!this.pwdType
    }
  },
  created() {
    this.getUser()
  }
}
</script>

<style lang="less" scoped>
.user {
  background-color: rgba(54, 209, 220, 1);
  width: 100%;
  height: 648px;
  .top-psw {
    color: white;
    font-size: 34px;
    margin-top: 10px;
    margin-left: 20px;
  }
  .phone {
    width: 322px;
    height: 154px;
    margin: 14px auto;
    .bsta {
      color: rgb(14, 144, 210);
    }
    .phone-p {
      color: white;
      font-size: 16px;
    }
    .phone-num {
      width: 42px;
      height: 24px;
      line-height: 24px;
      background: rgb(255, 255, 255);
      color: rgb(21, 127, 131);
      text-align: center;
      border-radius: 2px;
      position: absolute;
      top: 145px;
    }
    input {
      box-sizing: border-box;
      vertical-align: middle;
      background: none;
      color: #fff;
      border-bottom-color: #fff;
      border-radius: 0;
      width: 100%;
      border: none;
      border-bottom: 1px solid #ddd;
      outline: 0px;
      padding-left: 50px;
      height: 36px;
      font-size: 16px;
    }
    .pwd {
      padding-left: 0px;
    }
    .icon-eye {
      position: absolute;
      right: 20px;
    }
  }
  .login {
    width: 120px;
    height: 30px;
    font-size: 20px;
    border-radius: 20px;
    text-align: center;
    margin-top: 40px;
    margin-left: 32%;
    border: 1px solid #fff;
    color: #fff;
  }
  .login-no {
    margin-top: 30px;
    margin-left: 40px;
    .ckx {
      vertical-align: -2px;
      border: none;
    }
    .noLogin {
      color: #757575;
    }
  }
}
</style>
